<template>
    <div style="display: flex" class="tempxyz menmuStyle">
        <CCard class="rightCard">
            <CCardHeader class="header-wraper">
                <div class="header-left-titleWraper">
                    <span class="textTitle">节点组管理</span>
                </div>
                <div class="header-right-wraper">
                    <Input v-model="keyValue" placeholder="请输入搜索内容" style="width: 200px" class="headerMar" />
                    <Button type="primary"  @click="queryNodeGroupById()" class="system-btn-style headerMar" style="margin-right: 10px">
                        <Icon type="ios-search" />&nbsp;查询
                    </Button>
                    <Button type="warning" @click="addNodeGroup()" class="system-btn-style headerMar" >
                        <i class="fa fa-plus" aria-hidden="true"></i>&nbsp;节点组
                    </Button>

                </div>
            </CCardHeader>
            <CCardBody class="card-body">
                <div style="height: calc(100% - 46px)">
                    <TableList ref="table" :getColumn="getColumns" :getAxios="getAxios" >
                        <template v-slot:nodes="item">
                            {{ getNodeNameList(item.data.row,"nodes","nodeName") }}
                        </template>
                        <template v-slot:show_details="item">
                             <CButton
                                    title="查看"
                                    variant="outline"
                                    class="textBtnStyle onButton system-btn-style"
                                    @click="queryNodeGroup(item.data.row)"
                            >查看 </CButton>
                            <CButton
                                    title="修改"
                                    variant="outline"
                                    class="textBtnStyle onButton system-btn-style"
                                    @click="modifyNodeGroup(item.data.row)"
                            >修改 </CButton>
                            <CButton
                                    title="删除"
                                    variant="outline"
                                    class="textBtnStyle onButton system-btn-style"
                                    @click="deleteNodeGroup(item.data.row)"
                            >删除</CButton>
                        </template>
                    </TableList>
                </div>
            </CCardBody>
        </CCard>

        <!-- 查看节点组 -->
        <Modal
            v-model="queryNodeGroupShow"
            draggable
            scrollable
            title="节点组信息查看"
        >
            <p slot="header" class="modalHeader">节点组信息查看</p>
            <CRow>
                <CCol md="12">
                <CForm>
                    <CInput
                    label="组名"
                    horizontal
                    v-model="queryRowData.groupName"
                    readonly
                    />
                    <CInput
                    label="组编码"
                    horizontal
                    v-model="queryRowData.groupLabel"
                    readonly
                    />
                    <CInput
                    label="节点"
                    horizontal
                    v-model="queryRowData.nodes"
                    readonly
                    />
                    <CInput
                    label="描述"
                    horizontal
                    v-model="queryRowData.description"
                    readonly
                    />
                </CForm>
                </CCol>
            </CRow>
            <template #footer class="footerBtns">
                <CButton @click="queryNodeGroupShow=false" color="info" class="cancel-btn">取消</CButton>
                <CButton @click="queryNodeGroupShow=false" color="info" class="system-btn-style">确定</CButton>
            </template>
        </Modal>

        <!-- 修改节点组 -->
        <Modal v-model="modifyNodeGroupShow" draggable scrollable  :width="600" >
            <p slot="header" class="modalHeader">
                <span style="margin-left: 5px">修改节点组信息</span>
            </p>
            <div class="delKuangBody">
                <Form :model="modifyRowData" :label-width="80">
                    <FormItem label="组名">
                        <Input v-model="modifyRowData.groupName" placeholder="请输入节点组名称"></Input>
                    </FormItem>
                    <FormItem label="节点">
                        <Select v-model="modifyRowData.nodes" multiple>
                            <template v-for="item in nodeDataList">
                                <Option :value="item.id" :key="item.id">{{item.nodeName}}</Option>
                            </template>
                        </Select>
                    </FormItem>
                    <FormItem label="描述">
                        <Input v-model="modifyRowData.description" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入节点组描述"></Input>
                    </FormItem>
                    <FormItem label="创建人">
                        <Input 
                            v-model="modifyRowData.creator" 
                            type="textarea" 
                            :autosize="{minRows: 2,maxRows: 5}" 
                            placeholder="请输入节点组创建人"
                            disabled
                            >
                        </Input>
                    </FormItem>
                </Form>
            </div>
            <template #footer class="footerBtns">
                <CButton @click="modifyNodeGroupShow=false" color="info" class="cancel-btn">取消</CButton>
                <CButton @click="modifyOk" color="info" class="system-btn-style">确定</CButton>
            </template>
        </Modal>

        <!-- 删除节点组 -->
        <Modal
            v-model="delNodeGroupShow"
            draggable
            scrollable
            title="节点组信息"
            :styles="modalStyle"
        >
            <p slot="header" class="modalHeader">
                <img src="@/assets/icons/shanchu.svg" alt />
                <span style="margin-left: 5px">删除节点组</span>
            </p>
            <div class="delKuangBody">
                <p>删除节点组时与节点组相关的信息都会丢失</p>
                <p>请确认是否删除?</p>
            </div>
            <template #footer class="footerBtns">
                <CButton @click="delCancel" color="info" class="cancel-btn">取消</CButton>
                <CButton @click="delOk" color="info" class="system-btn-style">确定</CButton>
            </template>
        </Modal>

        <!--创建节点组-->
        <Modal v-model="addNodeGroupShow" draggable scrollable  :width="600" >
            <p slot="header" class="modalHeader">
                <span style="margin-left: 5px">创建节点组信息</span>
            </p>
            <div class="delKuangBody">
                <Form ref="addRowData" :model="addRowData" :rules="ruleValidate" :label-width="80">
                    <FormItem label="组名" prop="groupName">
                        <Input v-model="addRowData.groupName" placeholder="请输入节点组名称"></Input>
                    </FormItem>
                    <FormItem label="节点" prop="nodes">
                        <Select v-model="addRowData.nodes" multiple>
                            <template v-for="item in nodeDataList">
                                <Option :value="item.id" :key="item.id">{{item.nodeName}}</Option>
                            </template>
                        </Select>
                    </FormItem>
                    <FormItem label="描述">
                        <Input v-model="addRowData.description" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入节点组描述"></Input>
                    </FormItem>
                    <FormItem label="创建人">
                        <Input 
                            v-model="addRowData.creator" 
                            type="textarea" 
                            :autosize="{minRows: 2,maxRows: 5}" 
                            placeholder="请输入节点组创建人"
                            readonly
                            disabled>
                        </Input>
                    </FormItem>
                </Form>
            </div>
            <template #footer class="footerBtns">
                <CButton @click="addNodeGroupShow=false" color="info" class="cancel-btn">取消</CButton>
                <CButton @click="addOk" color="info" class="system-btn-style">确定</CButton>
            </template>
        </Modal>
    </div>
</template>

<script>

    import TableList from "@/template/table/TableList";

    export default {
        name: "serviceMonitor",

        components: { TableList },
        data() {
            return {
                formValidate:{
                    groupName:"",
                    nodes:"",
                },
                ruleValidate:{
                    groupName: [
                        { required: true, message: '节点组名称不能为空', trigger: 'blur' }
                    ],
                    nodes: [
                        { required: true, message: '节点不能为空', trigger: 'blur' }
                    ],
                },
                modalStyle: { top: "200px" },
                clickId: "",

                queryNodeGroupShow: false,
                modifyNodeGroupShow: false,
                delNodeGroupShow: false,
                addNodeGroupShow: false,

                queryRowData: {},//记录查询的数据：组名、组编码、节点、描述
                addRowData: {//记录创建节点组的信息
                    nodeGroupName: "",
                    nodes: [],
                    description: "",
                    creator: this.$store.state.user.userName,//默认登录用户
                },
                modifyRowData: {//记录修改节点组的信息
                    nodeGroupName: "",
                    nodes: [],
                    description: "",
                    creator: "",
                },

                keyValue: "",//记录关键字
                currentPage: "",
                pageSize: "",

                nodeDataList:{},//记录动态全部节点数据

                getColumns: [
                    {
                        title: "组名",
                        key: "groupName",
                        className: "centerText",
                    },
                     {
                        title: "节点",
                        key: "nodes",
                        className: "centerText",
                        slot: "nodes",//插槽调整
                    },
                    {
                        title: "描述",
                        key: "description",
                        className: "centerText",
                    },

                    {
                        title: "创建人",
                        key: "creator",
                        className: "centerText",
                        align:"center",
                    },
                    {
                        title: "创建时间",
                        key: "createTime",
                        className: "centerText",
                        align:"center",
                    },
                    {
                        key: "show_details",
                        slot: "show_details",
                        title: "操作",
                        align:"center",
                        width: "220",
                    },
                ],
                getAxios: {
                    url: this.$api.monitorApi.getNodeGroupInfo, //请求路径
                    method: "get", //请求方式
                    dataList: {}, //请求参数
                },

                nodes:[],//插槽记录所有节点的名字

                formItem:{
                    input: "",
                    select: "",
                },
            };
        },
        mounted() {
            this.getNodeName();
        },
        methods: {

            getNodeName(){
                let that = this;
                //获取节点
                this.http.get(this.$api.monitorApi.getNodeGroupInfo).then((res)=>{
                    if (res.data.success) {
                        that.nodes = res.data.data.nodes;
                    }
                })
            },
            getNodeNameList(row,lab,name){
                let list = "";
                row[lab].forEach((item)=>{
                    list+=item[name]+","
                })
                list=list.substring(0,list.length-1);
                return list;
            },
            handleReset (name) {
                this.checkTask=false
                this.$refs[name].resetFields();
            },
            //根据关键字查询
            queryNodeGroupById(){
                let path = this.$api.monitorApi.getNodeGroupInfo;
                let params = {
                    name: this.keyValue,
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                };
                this.http.get(path,params).then((res)=>{
                    if(res.data.code == 0){
                        this.$Message.success(res.data.message);
                        this.$refs.table.getRefreshTable(params);
                    }else{
                        this.$Message.error(res.data.message);
                    }
                });
            },
            //查看节点组信息
            queryNodeGroup(data){
                this.queryNodeGroupShow = true;
                this.queryRowData = JSON.parse(JSON.stringify(data));
                let objToArr = function(data){
                    let arr = [];
                    data.forEach((item)=>{
                        arr.push(item.nodeName)
                    })
                    return arr;
                }
                this.queryRowData.nodes = objToArr(this.queryRowData.nodes);
            },
            //修改节点组信息
            modifyNodeGroup(data){
                this.modifyNodeGroupShow = true;
                this.clickId = data.id;
                let newForm = JSON.parse(JSON.stringify(data));//深拷贝
                // this.modifyRowData = JSON.parse(JSON.stringify(data));//深拷贝
                let objToArr = function(data){
                    let arr = [];
                    data.forEach((item)=>{
                        arr.push(item.id)
                    })
                    return arr;
                }
                newForm.nodes = objToArr( newForm.nodes );
                this.modifyRowData = newForm;
                console.log(this.modifyRowData);
                //记录全部节点
                let path = this.$api.monitorApi.clusterNode;
                let params = {
                    name: "",
                    pageNum: "",
                    pageSize: "",
                }
                this.http.get(path,params).then((res)=>{
                    if(res.data.code == 0){
                        this.nodeDataList = res.data.data.clusterNodeList;//记录全部节点的数据
                    }else{
                        this.nodeDataList = "";
                    }
                });
            },
            modifyOk(){
                let path = this.$api.monitorApi.modifyNodeGroup + this.clickId;
                if(this.modifyRowData.groupName == "" || this.modifyRowData.groupName == null){
                    this.$Message.warning('节点组组名不能为空！');
                    return;
                }
                // if(this.modifyRowData.nodes.length < 2){
                //     this.$Message.warning('节点数不得少于两个！');
                //     return;
                // }
                if(this.modifyRowData.creator == "" || this.modifyRowData.creator == null){
                    this.$Message.warning('创建人不能为空！');
                    return;
                }
                //处理节点id
                let str = [];
                for(let i=0; i<this.modifyRowData.nodes.length;i++){
                    str.push({id:this.modifyRowData.nodes[i]});
                }
                let params = {
                    groupName: this.modifyRowData.groupName,
                    nodes: str,
                    description: this.modifyRowData.description,
                    creator: this.modifyRowData.creator,
                };
                this.http.put(path,params).then((res)=>{
                    if(res.data.code == 0){
                        this.$Message.success('修改成功！');
                        this.$refs.table.getRefreshTable();
                    }else{
                        this.$Message.error('修改失败！');
                    }
                });
                this.modifyNodeGroupShow = false;
            },
            //删除节点组信息
            deleteNodeGroup(data){
                this.delNodeGroupShow = true;
                this.clickId = data.id;
            },
            delOk(){
                this.delNodeGroupShow = false;
                let path = this.$api.monitorApi.delNodeGroup + this.clickId;
                this.http.delete(path).then((res)=>{
                    if(res.data.code == 0){//说明有要删除的数据
                        this.$Message.success('删除成功!');
                        this.$refs.table.getRefreshTable();
                    }else{
                        this.$Message.error('删除失败!');
                    }
                });
            },
            //新建节点组
            addNodeGroup(){
                this.addNodeGroupShow = true;
                this.addRowData.creator = this.$store.state.user.userName;//每次重新获取
                let path = this.$api.monitorApi.clusterNode;//记录全部节点
                let params = {
                    name: "",
                    pageNum: "",
                    pageSize: "",
                }
                this.http.get(path,params).then((res)=>{
                    if(res.data.code == 0){
                        this.nodeDataList = res.data.data.clusterNodeList;//记录全部节点的数据
                    }else{
                        this.nodeDataList = "";
                    }
                });
            },
            addOk(){
                let path = this.$api.monitorApi.createNodeGroup;
                if(this.addRowData.groupName == "" || this.addRowData.groupName == null){
                    this.$Message.warning('节点组组名不能为空！');
                    return;
                }
                // if(this.addRowData.nodes.length < 2){
                //     this.$Message.warning('节点数不得少于两个！');
                //     return;
                // }
                if(this.addRowData.creator == "" || this.addRowData.creator == null){
                    this.$Message.warning('创建人不能为空！');
                    return;
                }
                //处理节点id
                let str = [];
                for(let i=0; i<this.addRowData.nodes.length;i++){
                    str.push({id:this.addRowData.nodes[i]});
                }
                let params = {
                    groupName: this.addRowData.groupName,
                    nodes: str,
                    description: this.addRowData.description,
                    creator: this.addRowData.creator,
                };
                this.http.post(path,params).then((res)=>{
                    if(res.data.code == 0){
                        this.$Message.success('创建成功！');
                        this.$refs.table.getRefreshTable();
                        this.addRowData = {};//重置为空对象
                    }else{
                        this.$Message.error('创建失败' + '！' + res.data.message);
                    }
                });
                this.addNodeGroupShow = false;
            },
            addCancel(){
                this.addNodeGroupShow = false;
            },
            selectionChange(data) {
                // 选中的数据
            }
        },

    };
</script>

<style scoped>
    .rightCard {
        width: 80%;
        flex: 1;
    }

    .leftCard {
        width: 18%;
    }
    /deep/.card {
        margin-bottom: 0;
    }
    .headerMar{
        margin-left: 10px;
    }

    /deep/.ivu-form-item{
        margin-bottom: 10px;
    }
    .delKuangBody {
        margin-left: 39px;
        line-height: 2;
    }

</style>


